<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>分页导航</title>
    <link rel="stylesheet" href="./022.css" type="text/css" />
    <script>
      window.onload = () => {
        "use strict"
        let prevLink = document.querySelector(".prev")
        let nextLink = document.querySelector(".next")
        let pagination = document.querySelector(".pagination")
        let pageNumberLinks = document.querySelectorAll(".page-number a")
        let maxPageIndex = pageNumberLinks.length - 1
        pageNumberLinks.forEach((pageNumberLink, activeIndex) => {
          pageNumberLink.addEventListener("click", () => {
            pageNumberLinks.forEach((pageNumberLink) =>
              pageNumberLink.parentElement.classList.remove("active")
            )
            pageNumberLink.parentElement.classList.add("active")
            pagination.style.setProperty("--active-index", `${activeIndex}`)
          })
        })
        prevLink.addEventListener("click", () => {
          pageNumberLinks.forEach((pageNumberLink) =>
            pageNumberLink.parentElement.classList.remove("active")
          )
          let activeIndex = Number(
            pagination.style.getPropertyValue("--active-index")
          )
          activeIndex = activeIndex > 0 ? activeIndex - 1 : 0
          pageNumberLinks[activeIndex].parentElement.classList.add("active")
          pagination.style.setProperty("--active-index", `${activeIndex}`)
        })
        nextLink.addEventListener("click", () => {
          pageNumberLinks.forEach((pageNumberLink) =>
            pageNumberLink.parentElement.classList.remove("active")
          )
          let activeIndex = Number(
            pagination.style.getPropertyValue("--active-index")
          )
          activeIndex =
            activeIndex < maxPageIndex ? activeIndex + 1 : maxPageIndex
          pageNumberLinks[activeIndex].parentElement.classList.add("active")
          pagination.style.setProperty("--active-index", `${activeIndex}`)
        })
      }
    </script>
  </head>
  <body>
    <!--
      box-shadow：为盒子添加阴影，增加盒子的立体感，可以多层叠加，并且会使阴影更加丝滑
     -->
    <ul class="pagination">
      <li class="page-prev">
        <a class="prev" href="#"
          ><svg
            t="1580195949197"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4493"
            width="20"
            height="20"
          >
            <path
              d="M906.78272 588.78976c-0.02048 8.4992-6.88128 15.36-15.38048 15.37024l-443.6992-0.01024 75.70432 191.68256c2.51904 6.42048 0.48128 13.76256-5.03808 17.90976-5.51936 4.16768-13.13792 4.1472-18.61632-0.09216l-376.5248-289.47456c-3.77856-2.89792-6.00064-7.41376-6.00064-12.16512 0-4.78208 2.22208-9.27744 6.00064-12.1856l376.5248-289.47456c2.7648-2.11968 6.06208-3.19488 9.37984-3.19488 3.23584 0 6.5024 1.03424 9.23648 3.10272 5.51936 4.1472 7.5776 11.48928 5.03808 17.90976L447.68256 419.84l443.71968-0.01024c8.4992 0.01024 15.36 6.88128 15.36 15.36L906.78272 588.78976z"
              p-id="4494"
              fill="#777777"
            ></path></svg
        ></a>
      </li>
      <li class="page-number active"><a href="#">1</a></li>
      <li class="page-number"><a href="#">2</a></li>
      <li class="page-number"><a href="#">3</a></li>
      <li class="page-number"><a href="#">4</a></li>
      <li class="page-number"><a href="#">5</a></li>
      <li class="page-number"><a href="#">6</a></li>
      <li class="page-next">
        <a class="next" href="#"
          ><svg
            t="1580195920917"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4995"
            width="20"
            height="20"
          >
            <path
              d="M906.77248 512c0 4.77184-2.21184 9.2672-5.9904 12.17536l-376.5248 289.4848c-2.7648 2.11968-6.06208 3.18464-9.3696 3.18464-3.25632 0-6.5024-1.03424-9.24672-3.09248-5.50912-4.15744-7.5776-11.48928-5.03808-17.90976l75.71456-191.67232L132.58752 604.17024c-8.48896 0-15.36-6.88128-15.36-15.36l0-153.6c0-8.48896 6.87104-15.36 15.36-15.36l443.72992 0-75.71456-191.68256c-2.53952-6.42048-0.47104-13.75232 5.04832-17.90976 5.50912-4.15744 13.12768-4.13696 18.60608 0.09216l376.5248 289.4848C904.56064 502.7328 906.77248 507.22816 906.77248 512z"
              p-id="4996"
              fill="#777777"
            ></path></svg
        ></a>
      </li>
    </ul>
  </body>
</html>
